<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图像与文本可以这么对齐</title>
	</head>
	<body>
		<h1>水调歌头</h1>
		<p>
			<img src="../img4/图鉴1.jpg" style="vertical-align: text-top;"/>
			明月几时有，把酒问青天。不知天上宫阙，今夕是何年。
		</p>
		<p>
			<img src="../img4/图鉴2.jpg" style="vertical-align:middle"/>
			我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
		</p>
		<p>
			<img src="../img4/图鉴3.jpg" style="vertical-align: text-bottom;"/>
			转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？
		</p>
		<p>
			<!--图像的底部和文本的基线对齐，与text-bottom的区别是它会超出图片的下边线-->
			<img src="../img4/图鉴3.jpg" style="vertical-align: baseline;"/>
			人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
		</p>
	</body>
</html>
